<template>
    <div class="dnd-panel">
        <div v-for="nodeDefine in nodeDefineList" :key="nodeDefine.type" class="dnd-node" :data-type="nodeDefine.type" :data-width="nodeDefine.width" :data-height="nodeDefine.height">
            <svg-icon :name="nodeDefine.icon" width="26" height="26" color="var(--el-text-color-primary)"/>
            <span style="margin-top: 8px;user-select: none;">{{ nodeDefine.label }}</span>
        </div>
    </div>
</template>
  
<script setup lang="ts">
// 定义节点数据结构
export interface NodeDefine {
    type: string;
    label: string;
    icon: string;
    width: number;
    height: number;
};

export interface Node {
    type: string;
    label: string;
    icon: string;
    id: number;
};

const nodeDefineList = ref<NodeDefine[]>([
  { type: 'start', label: '开始' ,icon: 'bpm-start',width: 50, height: 50 },
  { type: 'userTask', label: '用户任务' ,icon: 'bpm-userTask' ,width: 150, height: 90},
  { type: 'gateway', label: '网关' ,icon: 'bpm-geteway' ,width: 80, height: 80},
  { type: 'systemTask', label: '系统任务' ,icon: 'bpm-systemTask' ,width: 150, height: 90},  
  { type: 'end', label: '结束' ,icon: 'bpm-end' ,width: 50, height: 50}
]);

</script>
  
<style scoped lang="scss">
.dnd-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--el-fill-color-overlay);
    border: 0.5px solid var(--el-border-color-lighter);
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    // opacity: 0.8; /* 设置初始透明度为0.8 */
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 8px;
    padding: 10px;    
    flex-wrap: wrap;
    gap: 10px;
}
.dnd-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed var(--el-border-color-dark);
    cursor: move;
    color:var(--el-text-color-regular);
    font-size: 13px;
}
.dnd-node:hover{
    background-color: var(--el-fill-color-dark);
}
</style>